<?php
//以下PHP代码用来处理一些创建数据库，初始登录的操作
include "connect.php";
session_start();
//使用session缓存来本地储存用户的数据库编号
$user_id = $_SESSION['user'];
if ($user_id==""){
    //    初始一个用户编号并在数据库中创建表
    $ree=mt_rand(10000000,99999999);
    $_SESSION['is_first']=1;
    $_SESSION['user'] = $ree;
    $query_select = "SELECT * FROM $ree";//  构建查询语句
    $result_select = mysqli_query($connection, $query_select);
    if (!$result_select) {
        $query_create = "CREATE TABLE `qnxg`.`$ree` ( `id` BIGINT NOT NULL , `name` TEXT NOT NULL , `active_time` INT NOT NULL , UNIQUE `id` (`id`)) ENGINE = MyISAM CHARSET=utf8 COLLATE utf8_bin;";//  构建查询语句
        $result_create = mysqli_query($connection, $query_create);
    }
}
?>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>
    .text {
        font-size: 15px;
    }

    .item {
        padding: 18px 0;
    }

    .box-card {
        width: 100%;
    }

</style>
<body>
<div id="app">
    <template>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="代码输入" name="first">
                <el-form method="post" ref="form" :model="form" label-width="80px" name="er">
                    <el-form-item label="录取人数">
                        <el-input v-model="form.number" placeholder="请输入录取人数" name="need_num"></el-input>
                    </el-form-item>
                    <el-form-item label="代码">
                        <el-input v-model="form.code" placeholder="请输入要执行的代码" name="code"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">提交</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="查看最终名单" name="fourth">
                <el-table
                        :data="tableData"
                        border
                        style="width: 100%">
                    <el-table-column
                            prop="id"
                            label="学号"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            width="180">
                    </el-table-column>
                </el-table>
                <br>
                <br>

            </el-tab-pane>
        </el-tabs>
        <?php
        //        接下来这段用于前后端交互运行结果
        session_start();
        if ($_SESSION['action_log']!=""){
            echo '<el-alert
                title="'.'上次运行结果：'.$_SESSION['action_log'].'"
                type="success"
                show-icon>
        </el-alert>';
        }
        //        前后端交互是否为第一次进入
        if ($_SESSION['is_first']==1){
            echo '        <el-alert
                title="您是第一次进入本网站，为测试需要，我们为您生成了专属数据库，并将数据库编号写入了您的cookie，在不清除缓存使用同一浏览器的情况下，您可以继续加载上次的数据信息！"
                type="info"
                show-icon>
        </el-alert>';
            $_SESSION['is_first']="";
        }
        ?>

        <el-card class="box-card">
            <div class="text item">
                注意事项：
            </div>
            <div class="text item">
                1.由于每个访问者的数据库之间是隔离的，您的测试操作不会影响他人。
            </div>
            <div class="text item">
                2.题目中需求没有提到被移除的同学的信息是否仍保留在数据库中，本系统默认不保留被移除同学的数据，如您在测试过程中修改了录取同学的人数，之前被移除的同学不会出现在录取名单中。
            </div>
            <div class="text item">
                3.最终名单为前后端直接交互，如您在新标签页中进行操作后没有在本标签页刷新，其结果将不会发生改变，不会自动刷新。
            </div>
        </el-card>
    </template>
</div>

</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="//unpkg.com/element-ui@2.15.6/lib/index.js"></script>
<script>
    var Main = {
        data() {
            return {
                activeName: 'first',
                form: {
                    name: '',
                    number: '<?php
//                        这里使用缓存来保存上次输入的结果（我们一般不对录取人数做改变）
                        session_start();
                        echo $_SESSION['need_num'];
                        ?>',
                },
                tableData: [<?php
//                    这里前后端交互获取最终名单
                    if ($user_id!="") {
                        $query_select = "SELECT * FROM `$user_id`";//  构建查询语句
                        $result_select = mysqli_query($connection, $query_select);
                        $lastre = array();
                        $t = 0;
                        while ($row = mysqli_fetch_row($result_select)) {
                            echo '{';
                            echo 'id:"'.$row[0].'",';
                            echo 'name:"'.$row[1].'",';
                            echo "},";
                        }
                    }
                    ?>]
            };
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            onSubmit() {
                console.log('submit!');
                document.er.action='action.php?mode=code';document.er.submit();
            },

        }
    };
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>
</html>